<template>
  <div class="mine-box">
    <van-nav-bar
      title="C2C交易"
      left-text=""
      left-arrow
      @click-left="onClickLeft"
      class="nav-bar"
    />
    <van-tabbar class="new-bo-nav" style="z-index:9999;height: 62px;background: #000;">
      <van-tabbar-item>
        <router-link :to="{ path: '/c2c' }">
          买单
        </router-link>
      </van-tabbar-item>

      <van-tabbar-item>
        <router-link :to="{ path: '/selllist' }">
          卖单
        </router-link>
      </van-tabbar-item>

      <van-tabbar-item>
        <router-link :to="{ path: '/myC2C' }">
          我的交易
        </router-link>
      </van-tabbar-item>

      <van-tabbar-item>
        <router-link :to="{ path: '/historyorder' }">
          历史订单
        </router-link>
      </van-tabbar-item>
    </van-tabbar>
    <div class="ctc-top" style="background-color:#fff;height:40px;padding-top:5px;">
      <span @click="tobuy" class="myC2C" style="margin-left:10%;">挂买</span>

      <span @click="tosell" class="myC2C" style="margin-right:10%;float:right">挂卖</span>
    </div>
    
    <div class="container">
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        <van-list
          v-model="loading"
          :finished="finished"
          @load="onLoad"
          :immediate-check="false"
          :offset="100"
        >
          <div
            class="section-item"
            v-for="(item, index) in list"
            :key="index" @click="toC2CBuy(item)"
          >
            <div style="width:95%;margin:0px auto;">
            <h2><span class="user-logo">{{item.logo_name}}</span><span class="user-name">{{item.user.nick_name}}</span></h2>
            <p class="usdt-num"><span>{{((parseFloat(item.entrust_qty) - parseFloat(item.deal_qty)) * parseFloat(item.entrust_price)).toFixed(2)}}</span>usdt</p>
            <p class="usdt-num-num">数量&nbsp;{{parseInt(parseFloat(item.entrust_qty) - parseFloat(item.deal_qty))}}&nbsp;&nbsp;<span>OBT</span><van-icon class='go-detail' name="arrow" color="#000"/></p>
            </div>
          </div>
        </van-list>
      </van-pull-refresh>

      <div class="circle" v-if="isCircleLoading">
        <van-loading :size="'100px'" color="black" />
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant';
import { Dialog } from 'vant';
export default {
  data(){
    return {
      isCircleLoading: true,
      loading: false,
      isLoading: false,
      finished: false,
      pageIndex: 0,
      pageCount: 10,
      list: [],
      lastPageUrl:"",
    }
  },
  created(){

  },
  mounted(){
    this.lastPageUrl = sessionStorage.getItem("lastAndNowPage").split('-')[1];
    sessionStorage.setItem("lastAndNowPage",this.lastPageUrl+"-/selllist");
    token_g = JSON.parse(sessionStorage.getItem("usermessage")).token;
    this.isCircleLoading = true
    this.getListData()
  },
  methods:{
    onClickLeft(){
      this.$router.push('/wallet')
    },
    onLoad() {
      this.pageIndex ++
      this.getListData()
    },
    onRefresh() {
      setTimeout(() => {
        this.isCircleLoading = true
        this.pageIndex = 0
        this.list = []
        this.getListData()
      }, 500);
    },
    comparedesc(prop){
      return function (obj1, obj2) {
        var val1 = obj1[prop];
        var val2 = obj2[prop];
        if (!isNaN(Number(val1)) && !isNaN(Number(val2))) {
            val1 = Number(val1);
            val2 = Number(val2);
        }
        if (val1 > val2) {
            return -1;
        } else if (val1 < val2) {
            return 1;
        } else {
            return 0;
        }
      }
    },
    tobuy(){
      this.$axios({
            method: 'POST',
            url: url_g + '/aboutme/',
            headers: {
              'Authorization': 'Bearer ' + token_g
            }
          }).then((res) => {
             let data = res.data.data
              if(data.rating && parseInt(data.rating) > 1){
                this.$router.push('/buyC2C')
              }else{
                Toast('用户级别不够，不能挂卖');
              }
          }).catch((e) => {
            Toast('获取用户级别失败');
          })
    },
    tosell(){
      this.$router.push('/sellC2C')
    },
    toMyC2C(){
      this.$router.push('/myC2C')
    },
    toCreateC2C(){
      this.$axios({
            method: 'POST',
            url: url_g + '/aboutme/',
            headers: {
              'Authorization': 'Bearer ' + token_g
            }
          }).then((res) => {
             let data = res.data.data
              if(data.rating && parseInt(data.rating) > 1){
                this.$router.push('/createC2C')
              }else{
                Toast('用户级别不够，不能挂卖');
              }
          }).catch((e) => {
            Toast('获取用户级别失败');
          })
      
    },
    toC2CBuy(item){
      sessionStorage.setItem('c2cmessage',JSON.stringify(item))
      this.$router.push('/C2CBuyOBT')
    },
    getListData() {
      let $this = this;
      let params = {qty: '10'}
      if(this.pageIndex != 0) {
        params.page = this.pageIndex + 1
      }
      this.$axios({
        method: "GET",
        url: url_g + "/c2c/market/?type=1",
        headers: {
          'Authorization': 'Bearer ' + token_g
        }
      }).then((res) => {
        console.log(res)
        if(res.data && res.data.results && 0 < res.data.results.length){
          res.data.results.sort(this.comparedesc('created_on'))
          let newArr = res.data.results
          this.pageCount = res.data.count

          for (let i = 0; i < newArr.length; i ++) {
            if(!newArr[i].deal_qty){
              newArr[i].deal_qty = 0;
            }
            if(!newArr[i].deal_price){
              newArr[i].deal_price = 0;
            }
            if(!newArr[i].commission){
              newArr[i].commission = 0;
            }
            if(!newArr[i].entrust_price){
              newArr[i].entrust_price = 0;
            }
            if(!newArr[i].entrust_qty){
              newArr[i].entrust_qty = 0;
            }
            if(newArr[i].user.nick_name){
              newArr[i].logo_name = newArr[i].user.nick_name.substr(0,1)
            }

            this.list.push(newArr[i])
          }

          this.loading = false;
          this.isLoading = false;
          this.isCircleLoading = false
          if (this.list.length >= this.pageCount) {
            this.finished = true;
          }
        }else{
          this.isCircleLoading = false
          Toast('没有数据');
        }
      }).catch((e)=>{
        Toast(e.response.data.detail);
      })
    },
  }
}
</script>

<style scoped>
.ctc-top{
  height: 145px !important;
  background: url('/static/img/game/mine-bg.jpg') no-repeat;
  background-size: cover cover;
  background-attachment: fixed;
}
.myC2C{
  font-size:14px;
  display:block;
  float:left;
  line-height:30px;
  color:#fff;
  border:solid 1px #7595ae;
  width:30%;
  height:30px;
  margin-top:20px;
  border-radius:15px;
  letter-spacing:2px;
  z-index: 999999;
}
.go-detail{
  width: 30px;
  color: yellow;
  height: 30px;
  float: right;
  display: block;
}
.van-list{
  height: 100vh;
  overflow-y: scroll;
}
.usdt-num-num{
  line-height:28px;
  color:#9dafbb;
  text-align:left;
  font-size:12px;
}
.usdt-num-num span{
  font-size:14px;
  color:#0a0a0a
}
.usdt-num{
  line-height:28px;
  color:#080808;
  text-align:left
}
.usdt-num span{
  margin-right:5px;
  color:#173140;
}
.user-logo{
  margin-right:10px;
  font-size:12px;
  line-height:30px;
  display:block;
  float:left;
  width:30px;
  height:30px;
  border-radius:15px;
  background-color:#000;
  color:#fff;
  text-align:center;
}
.user-name{
  font-size:12px;
  line-height:30px;
   display:block;
  float:left;
  color:#1f2c35;
}
.mine-box{
  text-align: center;
  height: 100vh;
  color: #fff;
  overflow: scroll;
  background-color:#eeeeee
}
.nav-bar {
  color: #000;
}
.circle {
  display: flex;
  justify-content: center;
  margin-top: 100px;
  width: 100%;
  text-align: center;
}
.app-list{
  width:95%;
  margin:0px auto;
  padding-top:10px;
  height:100%;
  overflow-y:scroll;
}
p {
  margin: 0;
  font-size: 14px;
}
.rank-box {
  height: 100%;
  overflow: auto;
}
/*seciton*/
.section-item {
  background-color:#fff;
  width: 100%;
  height: 110px;
  color:#000;
  margin-bottom:10px;
}
.section-item h2{
  margin:0px;
  height:40px;
  text-align:left;
  border-bottom:solid 1px #dedede;
  padding-top:10px;
}
.section-item-title {
  font-weight: bold;
  line-height: 24px;
  font-size: 14px;
}
.section-item-desc {
  color: #777;
  line-height: 20px;
  font-size: 12px;
}
.section-item-label {
  margin-top: 5px;
}
.section-item-label span {
  padding: 2px 6px;
  border: 1px solid orange;
  border-radius: 15px;
  color: orange;
  font-size:12px;
  font-size:9.6px;
  -webkit-transform: scale(0.80);
}
.section-btn {
  border: 1px solid #529ec2;
  color: #529ec2;
  padding: 3px 14px;
  font-size: 12px;
  border-radius: 15px;
  line-height: 12px;
  height: 24px;
}
.section-item-index {
  text-align: center;
}
.section-item-left {
  padding: 5px;
  width:75px;
  margin-right:10px
}
.section-item-middle{
  width:200px;
}
.section-img {
  overflow: hidden;
  width: 65px;
  height: 65px;
  padding: 5px;
}
.section-img img {
  width: 100%;
  height: 100%;
  border-radius: 15px;
  box-shadow: 0px 2px 10px #dadada;
}
.section-item-right{
  width:80px;
}
.section-item-right button{
  width:100%;
  display:block;
}
.section-item-right button span{
  width:100%;
  display:block;
}
/*seciton  over*/
</style>
